<template>
  <el-container v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" class="productContainer">
    <el-header height="81px">
      <div class="flex ydsl-top">
        <img src="../../static/images/logo.png" alt="">
        <div class="everyOtherOine"></div>
        <div class="ydslTitle">制品看板</div>
      </div>
    </el-header>
    <el-main class="elMain">
      <div class="productQuery clear">
        <div class="productQueryLabel fl">日期：</div>
        <el-date-picker v-model="beginDate" type="date" placeholder="请选择开始日期" class="product-date-picker fl"
          @change="beginDateChange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"></el-date-picker>
        <div class="productQueryLabel fl">至</div>
        <el-date-picker v-model="endDate" type="date" placeholder="请选择结束日期" class="product-date-picker fl"
          @change="endDateChange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"></el-date-picker>
        <a href="javascript:;" class="product-return fr" @click="goBack"><i class="el-icon-d-arrow-left"></i>返回</a>
      </div>
      <div class="clear">
        <div class="productTableBox flex fl">
          <el-table :data="tableData[0]" stripe class="productTable flex1" center>
            <el-table-column prop="number" label="序号" align="center" min-width="60px"></el-table-column>
            <el-table-column prop="create_date" label="日期" width="150px" align="center"></el-table-column>
            <el-table-column prop="outer_length" label="卷长（m）" align="center" min-width="100px"></el-table-column>
            <el-table-column prop="act_thickness" label="宽度（um）" align="center" min-width="100px"></el-table-column>
          </el-table>
          <el-table :data="tableData[1]" stripe class="productTable flex1">
            <el-table-column prop="number" label="序号" align="center" min-width="60px"></el-table-column>
            <el-table-column prop="create_date" label="日期" width="150px" align="center"></el-table-column>
            <el-table-column prop="outer_length" label="卷长（m）" align="center" min-width="100px"></el-table-column>
            <el-table-column prop="act_thickness" label="宽度（um）" align="center" min-width="100px"></el-table-column>
          </el-table>
        </div>
        <div class="fl lineChartBox" ref="myLine"></div>
      </div>
      <!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" class="elPagination tx-c" @current-change="pageChange"></el-pagination> -->
      <!-- <div class="pageBox">
        <a href="javascript:;"><i class="el-icon-arrow-left"></i>&nbsp;上一页</a>
        <a href="javascript:;">下一页&nbsp;<i class="el-icon-arrow-right"></i></a>
      </div> -->
      <el-button-group class="pageBox">
        <el-button icon="el-icon-arrow-left" disabled v-if="currentPage==1">上一页</el-button>
        <el-button icon="el-icon-arrow-left" v-else @click="prevPage">上一页</el-button>
        <el-button disabled v-if="currentPage==totalPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        <el-button v-else @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </el-main>
  </el-container>
</template>

<script>
  import Group from './BoardGroup.vue'
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'Index',
    components: {
      //'v-Home': Home,
      //'v-Group': Group
    },

    data () {
      
      var a={
        number: '1',
        create_date: '2016-05-02',
        outer_length: '20',
        act_thickness: '20',
      };
      var b=[];
      var c=[];
      for (let index = 0; index < 20; index++) {
        b.push(a);
      };
      c[0]=b;
      c[1]=b;
      c[2]=b;
      console.log(c);
      return {
        autoplay:false,
        device: this.$route.params.id,
        loading: false,
        beginDate: '',
        endDate: '',
        tableData: c,
        fRowBegin: 0,
        fRowEnd: 32,
        total: 100,
        pageSize: 32,
        currentPage:1,
        totalPage:10,
      }
    },

    created(){
      this.getProducts();
      this.getChartData();
    },
    mounted(){
    },
    methods: {
      //退出
      exit (){
        delCookie('userId')
        this.$router.push({
          path: "/",
        });
      },
      beginDateChange(val){
        console.log('开始日期',val);
        this.getProducts();
      },
      endDateChange(val){
        console.log('结束日期',val);
        this.getProducts();
      },
      getProducts(){
        this.loading=true;
        console.log('fRowBegin',this.fRowBegin);
        this.$ajax.post(this.webUrl+'/Default/productsMoreKanban',
        {
          device: this.device,
          fBeginTime: this.beginDate,
          fEndTime: this.endDate,
          fRowBegin: this.fRowBegin,
          fRowEnd: this.fRowEnd,
        }).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.total = parseInt(res.data.total);
            if(res.data.total%this.pageSize==0){
              this.totalPage = parseInt(res.data.total/this.pageSize);
            }else{
              this.totalPage = parseInt(res.data.total/this.pageSize)+1;
            }
            console.log('totalPage',this.totalPage);
            var b=[];
            var b1=[];
            var b2=[];
            var c=[];
            res.data.data.forEach(function(i,index){
              i.number=index+1;
              //console.log(i);
              if(index<16){
                b.push(i);
              }else{
                b1.push(i);
              }
              // else if(index>15&index<32){
              //   b1.push(i);
              // }
            });
            c[0]=b;
            c[1]=b1;
            //c[2]=b2;
            console.log(c);
            this.tableData = c;
          }
        }).catch(error => {
          console.log(error);
        });
      },
      getChartData(){
        this.$ajax.post(this.webUrl+'/Default/productsKanban2',{
          device: this.device,
        }).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            console.log(res.data);
            this.drawLine(res.data.data);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      pageChange(e){
        console.log('currentPage',e);
        this.fRowBegin = (e-1)*this.pageSize;
        this.getProducts();
      },
      prevPage(){
        this.currentPage--;
        this.fRowBegin = (this.currentPage-1)*this.pageSize;
        console.log('currentPage',this.currentPage);
        this.getProducts();
      },
      nextPage(){
        this.currentPage++;
        this.fRowBegin = (this.currentPage-1)*this.pageSize;
        console.log('currentPage',this.currentPage);
        this.getProducts();
      },
      goBack(){
        this.$router.go(-1)
      },
      drawLine(data) {
        var _this=this;
        let dom= this.$refs.myLine;
        let myLine = echarts.init(dom);
        console.log('chartData',data);
        var yAxisData=[];
        var xAxisData=[];
        if(data.length>0){
          data.forEach(function(i){
            var date=i.create_date.split(" ");
            yAxisData.push(date[0]);
            xAxisData.push(i.count);
          })
        }
        // 绘制图表
        myLine.setOption({
          textStyle: {
            color:'#fff',
          },
          title: {
            text: '近十日制品数量',//_this.title
            x:'right',
            subtext:'',//_this.subtitle
            textStyle: {
              color: '#fff',
              fontSize:20,
            },
            top: '0px',
            subtextStyle: {
              color: '#a0a0a0',
              fontSize: 15,
            },
          },
          legend: {
            data:['近十日制品数量'],
            show:false,
            top:'20px',
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '20%',right: '10%',bottom:'30px',
          },
          tooltip: {},
          xAxis: {
            //interval:100,
            name: '产量',
            boundaryGap: false,
            nameLocation: 'end',
            axisLine: {
              show:true,
              lineStyle: {
                color: '#4388cd',
                width: 1,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ["#0f5070"],
                type: 'dashed',
              },
            },
            axisLabel: {
              //align:'left',
            },
          },
          yAxis: {
            name: '日期',
            data: yAxisData,//["2019/05/01", "2019/05/01", "2019/05/01", "2019/05/01", "2019/05/01"],
            nameLocation: 'end',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4388cd',
                width: 1,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: false,
              interval: 'auto',
              lineStyle: {
                color: ["#629fc2"],
                type: 'dashed',
              },
            },
          },
          series: [
            {
              name: '近十日制品数量',
              type: 'bar',
              data: xAxisData,//[6,16,23,39,46],
              itemStyle: {
                color:function (params){
                  //console.log('params',params);
                  var colorList = ['#6bedaf','#f784fd','#35bafb','#e9cc68','#f36c7a'];
                  if(params.value<10){
                    return colorList[0];
                  }else if(params.value > 10 && params.value < 20){
                    return colorList[1];
                  }else if(params.value >20  && params.value < 30){
                    return colorList[2];
                  }else if(params.value >30  && params.value < 40){
                    return colorList[3];
                  }else{
                    return colorList[4];
                  }
                },
              },
              barWidth:30,
              label: {
                show:false,
                position: 'top',
                color: '#fff',
              },
            },
          ]
        });
        
      },
    }
  }
</script>

<style scoped>

</style>
